<template>
    <div class="popluar">
        <p class="shortTitle">Popular</p>
        <h2 class="bigTitle">正在热销</h2>
        <div class="classify">
            <div
                @click="navToGoodList"
                class="itemWrap"
                v-for="item in items"
                :key="item.id"
            >
                <img
                    class="iconWrap"
                    :src="item.iconUrl"
                />
                <p class="itemName">{{item.itemName}}</p>
                <span class="goodNum">{{item.goodNumber}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'popluar',
    props:['goodTypeList'],
    data() {
        return {
            items: this.goodTypeList
        }
    },
    methods: {
        navToGoodList() {
            this.$router.push({  //核心语句
                path: '/goodList',   //跳转的路径
                query: {           //路由传参时push和query搭配使用 ，作用时传递参数
                    id: this.id,
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.popluar {
    padding: 20px 40px;
    .shortTitle {
        font-size: 14px;
        color: #9a9a9a;
    }
    .bigTitle {
        color: #494949;
        font-size: 30px;
    }
    .classify {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 20px;
        .itemWrap {
            width: 200px;
            height: 200px;
            border-radius: 15px;
            background: #fff;
            box-shadow: 5px 5px 10px #f1f5f8;
            text-align: center;
            margin-bottom: 30px;
            .iconWrap {
                height: 30px; /*no*/
                width: 60px; /*no*/
                margin: 40px auto 10px;
            }
            .itemName {
                height: 40px;
                line-height: 40px;
                font-size: 26px;
            }
            .goodNum {
                color: #979797;
            }
        }
    }
}
</style>
